<template>
  <div class="scroll-container" ref="container">
    <slot></slot>
  </div>
  </template>

<script setup lang="ts">
/**
 * create a scrollable container with custom scrollbar styling and dynamic sizing. 
 * It also allows for the option to add a margin at the bottom of the container.
 */

import { onBeforeUnmount, onMounted, ref } from 'vue';

import { resizeDomElement } from 'src/utils/htmlUtils';

export interface ScrollAreaProps{
  botMargin?:number
}

const props = defineProps<ScrollAreaProps>()

const container= ref()

const resizeFunc = ()=>{
  if (container.value){
    let bm = 0
    if (props.botMargin){
      bm = props.botMargin
    }
    resizeDomElement(container.value,bm)
  }
}

onMounted(()=>{
  resizeFunc()
  setTimeout(resizeFunc,300)
  addEventListener('resize',resizeFunc)

})

onBeforeUnmount(()=>{
  removeEventListener('resize',resizeFunc)
})

defineExpose({
  resizeFunc
})

</script>
<style scoped lang="scss">

.scroll-container{
  padding-left: 2px;
  padding-right: 2px;
  overflow-y: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  }
  // &::-webkit-scrollbar-track{
  //     display:none;
  // }
  &::-webkit-scrollbar-thumb{
      background-color: #d9d9d9;
  }
  &::-webkit-scrollbar-track {
      background: rgb(255,255,255,0.5);
  }
  &:hover{
      overflow: overlay;
  }
}

</style>